/*eslint-disable*/
import React from 'react';
import Container from 'components/Container';
import classnames from 'classnames';
import { Form, Checkbox } from 'antd';
import Input from 'components/Input';
import Select from 'components/Select';
import styles from './index.module.less';

const InputCom = (item, name) => {
  console.log();
  return (
    <Container key={item.name} style={{ marginBottom: !item.rules && '12px' }}>
      <span style={{ fontSize: '13px', marginLeft: '16px', color: '#E7EFFF' }}>
        {item.labelRequired && <span style={{ color: '#C43A57' }}>*</span>}
        {item.name}
      </span>
      {
        item.isSelect
          ? (
            <Select
              name={name}
              className={styles.select}
              disabled={item.disabled}
              initialValue={item.initialValue}
              optionData={item.options}
              onChange={item.onChange}
              style={{ height: item.rules && 'auto' }}
            />
          )
          : item.isTags
            ? (
              <Select
                name={name}
                mode="tags"
                maxTagTextLength={item.maxTagTextLength}
                maxTagCount={item.maxTagCount}
                rules={item.rules}
                className={styles.select}
                disabled={item.disabled}
                optionData={item.options}
                getValueFromEvent={item.getValueFromEvent}
                onChange={item.onChange}
                style={{ height: item.rules && 'auto' }}
              />
            )
            : (
              <Container flex justify="space-between" alignItems="center">
                <Input
                  name={name}
                  isTextArea={item.isTextArea}
                  rules={item.rules}
                  disabled={item.disabled}
                  initialValue={item.initialValue}
                  className={item.isTextArea ? classnames(styles.input, styles.textArea) : styles.input}
                  onChange={item.onChange}
                  placeholder={item.placeholder}
                  style={{ height: item.rules && 'auto' }}
                />
                {item.required
                  && <Form.Item name={`${name}_required`} valuePropName="checked" style={{ marginBottom: 0 }}>
                    <Checkbox className={styles.checkbox} disabled={item.disabled} onChange={item.onCheck} style={{ width: 150, color: '#E7EFFF' }}>是否必填</Checkbox>
                  </Form.Item>
                }
              </Container>
            )
      }
    </Container>
  )
}

export default InputCom;
